<template>
  <div class="rank" ref="rank">
            <div class="toplist">
                <Scroll class="recommend-content" :data="topList" ref="scroll" style="height:100%;overflow: hidden">
                    <div>
                     <ul style="position:relative;width: 100%;overflow: hidden;">
                    <li
                    class="item"
                    v-for="item of topList"
                    :key="item.id"
                     @click="selectItem(item)">
                    <div class="icon"><img
                        width="100"
                        height="100"
                        v-lazy="item.picUrl"
                    /></div>
                    <ul class="songlist">
                    <li
                        class="song"
                        v-for="(song,index) of item.songList"
                    >
                        <span>{{index+1}}</span>
                        <span>{{song.singername}}-{{song.songname}}</span>
                    </li>
                    </ul>
                </li>
                </ul>
                    </div>
                 </Scroll>
            </div>
            <router-view></router-view>
          </div> 
</template>
<script>
import { getTopList, getMusicList } from "api/rank";
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import {mapMutations}  from "vuex"
export default {
  data() {
    return {
      topList: []
    };
  },
  created() {
    this._getTopList();
  },
  methods: {
    _getTopList() {
      getTopList().then(res => {
        this.topList = res.data.topList;
      });
    },
    selectItem(item){
    this.$router.push({path:`/rank/${item.id}`})
    this.setToplist(item)
    },
    ...mapMutations({
        setToplist:"SET_TOP_LIST"
    })
  },
  components:{
      Scroll,
      Loading 
    },
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.rank 
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;

  .toplist 
    height: 100%;
    overflow: hidden;
    background #f2f3f4
    position relative
    width: 100%

    .item 
      display: flex;
      margin: 0 20px;
      padding-top: 20px;
      height: 100px;
      border-bottom 1px solid #e6e7e7
      padding-bottom 2px

      &:last-child 
        padding-bottom: 20px;
      
      .icon 
        flex: 0 0 100px;
        widows: 100px;
        height: 100px;
      

      .songlist 
        flex: 1;
        display: flex;
        flex-direcitoin: column;
        padding: 0 20px;
        height: 100px;
        overflow: hidden;
        color: $color-text-d;
        font-size: $font-size-small;
        flex-wrap wrap
        .song 
          no-wrap();
          line-height: 26px;
          width:300px
</style>


